let colors = ['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379']
//中国地图
function buildChart1() {
    var myChart = echarts.init(document.getElementById('map'));
    var mydata = [
        { name: '河北', value: 1 },
        { name: '山东', value: 1 },
        { name: '河南', value: 1 },
        { name: '重庆', value: 1 },
        { name: '广西', value: 1 },
        { name: '四川', value: 1 },
        { name: '海南', value: 1 },
        { name: '北京', value: 2 },
        { name: '天津', value: 2 },
        { name: '上海', value: 2 },
        { name: '江苏', value: 2 },
        { name: '浙江', value: 2 },
        { name: '福建', value: 2 },
        { name: '安徽', value: 2 },
        { name: '江西', value: 2 },
        { name: '湖北', value: 2 },
        { name: '湖南', value: 2 },
        { name: '广东', value: 2 },
        { name: '辽宁', value: 3 },
        { name: '吉林', value: 3 },
        { name: '黑龙江', value: 3 },
        { name: '内蒙古', value: 3 },
        { name: '云南', value: 3 },
        { name: '贵州', value: 3 },
        { name: '山西', value: 4 },
        { name: '陕西', value: 4 },
        { name: '甘肃', value: 4 },
        { name: '新疆', value: 4 },
        { name: '西藏', value: 4 },
        { name: '青海', value: 4 },
        { name: '宁夏', value: 4 }
    ];

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}',
        },
        roam: true,
        visualMap: {
            min: 0,
            max: 5,
            x: '90%',
            y: '70%',
            textStyle:{
                color:"#fff",

            },
            splitList: [

                {
                    start: 3.5,
                    end: 5,
                    label: '轻微',
                    color: colors[0]

                }, {
                    start: 2.5,
                    end: 3.5,
                    label: '中度',
                    color: colors[1]
                }, {
                    start: 1.5,
                    end: 2.5,
                    label: '重度',
                    color: colors[2]
                },

                {
                    start: 0,
                    end: 1.5,
                    label: '特重',
                    color: colors[3]
                },

            ],
        },

        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [{
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }

            },
            data: mydata,
            itemStyle:{
                borderColor:"#fff",
                borderWidth: 0.8,
            }
        },]
    };
    myChart.setOption(option);
}
//舆情趋势
function buildChart2() {
    var myChart = echarts.init(document.getElementById('trend'));
    let positiveDate = [62,54,56,72,54,58,62,54,56,72,54,58,45,71,49,56,75,45,45,71,49,56,75,45,]
    let negativeDate = [21,14,10,22,19,14,15,19,20,17,13,20,12,32,24,23,25,20,27,20,22,12,11,10]
    let allDate =new Array
    for (let i =0;i<positiveDate.length;i++){
        allDate.push(positiveDate[i]+negativeDate[i])
    }
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: [ '正面', '中性','负面'],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color:"#fff"
                }
            },
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
        }, {
            axisPointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color:"#fff"
                }
            },
            position: 'bottom',
            offset: 20,
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color:"#fff"
                }
            },
            splitLine: {
                show:false
            }
        }],
        series: [{
            name: '正面',
            type: 'line',
          symbol: 'none',
          smooth: true,
          symbolSize: 5,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
                offset: 0,
                color: 'rgba(13,241,222,0.6)'
              }, {
                offset: 0.3,
                color: 'rgba(13,241,222,0)'
              }, {
                offset: 1,
                color: 'rgba(13,241,222,0)'
              }], false),
            }
          },
          itemStyle: {
            color: "#407FFF"
          },

            data: allDate
        }, {
            name: '中性',
            type: 'line',
          smooth: true,
          symbol: 'none',
          symbolSize: 5,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(208,99,10,0.6)'
              }, {
                offset: 0.3,
                color: 'rgba(208,99,10,0)'
              }, {
                offset: 1,
                color: 'rgba(208,99,10,0)'
              }], false),
            },
          },
          itemStyle: {
            color: "rgba(208,99,10,0.6)"
          },
            data: positiveDate
        }, {
            name: '负面',
            type: 'line',
          symbol: 'none',
          smooth: true,
          symbolSize: 5,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: ' rgba(13,241,222,0.50196)'
              }, {
                offset: 0.3,
                color: 'rgba(13,241,222,0.10196)'
              }, {
                offset: 1,
                color: 'rgba(13,241,222,0)'
              }], false),
            },
          },
          itemStyle: {
            color: "rgba(13,241,222,0.50196)"
          },

            data:negativeDate
        }, ]
    };
    myChart.setOption(option);
}
//传播渠道
function buildChart3() {
    var myChart = echarts.init(document.getElementById('communication'));
    option = {
        color:colors,
        legend: {
            orient: 'vertical',
            top: '30%',
            x:'40%',
            itemWidth:20,
            itemHeight:"10",
            data: ['微博','微信','网媒','论坛','视频',"APP"],
            textStyle:{
                color:"#fff",
                fontSize:10
            }
        },
        tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    series : [
	        {
	            name: '传播渠道',
	            type: 'pie',
	            radius : '50%',
	            center: ['20%', '50%'],
	            data:[
	                {value:335, name:'微博'},
	                {value:310, name:'微信'},
	                {value:234, name:'网媒'},
	                {value:135, name:'论坛'},
	                {value:234, name:'视频'},
	                {value:135, name:'APP'}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            },
	            itemStyle: {
	                normal: {
	                    label:{
                            show: false,
//	                            position:'inside',
                            formatter: '{b} : {c} ({d}%)'
                        }
	                },
                    labelLine :{show:true}
	            }
	        },
            {
	            name: '正负面对比',
	            type: 'pie',
	            radius : '50%',
	            center: ['80%', '50%'],
	            data:[
	                {value:335, name:'正面'},
                    {value:150, name:'中性'},
	                {value:210, name:'负面'}
	            ],
	            itemStyle: {
                    // color:["#14C6CA","#F29961"],
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            },
	            label: {
                    normal: {
                        position: 'inner',
                        formatter: '{b}'+'\n'+'{d}%',
                         textStyle: {
                            color: '#ffffff',
                            fontSize: 12
                        }
                    }
                },
	        },
	    ]
	};
    myChart.setOption(option);
}
//传播渠道
function buildChart4() {
    var myChart = echarts.init(document.getElementById('source'));
    option = {
        grid: {
            show:'true',
            borderWidth:'0',
            height:"90%",
            width:"72%",
            x:"20%",
            y:"2%",
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: "{b0}: {c0}"
            /*formatter: function(params) {
                var result = '';
                params.forEach(function (item) {
                    result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
                });
                return result;
            }*/
        },
        xAxis: {
            show: false,                //是否显示x轴
            type: 'value'
        },
        yAxis: {
            type: 'category',
            inverse:true,               //让y轴数据逆向
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#666'       //y轴字体颜色
                },
                formatter: function(value, index) {
                    return [
                        '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
                    ].join('\n');
                },
                //定义富文本标签
                rich: {
                    lg: {
                        fontWeight: 'bold',
                        align:"left",
                        fontSize: 12,       //字体默认12
                        color: '#fff',
                        padding: [0, 5, 0, 0]
                    },
                    title: {
                        color: '#fff',
                        fontWeight: 'lighter',
                        // borderWidth: 1,
                        // borderColor: '#08c'
                        // textareaBorderColor: '#08c',
                    }
                }
            },
            splitLine: {show: false},   //横向的线
            axisTick: {show: false},    //y轴的端点
            axisLine: {show: false},    //y轴的线
            data: ['微博','微信','网站','新闻','论坛',"视频",'报刊','客户端','博客','外媒']
        },
        series: [
            {
                name: '数据内框',
                type: 'bar',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#0489F0'
                  }, {
                    offset: 1,
                    color: '#28D8E8'
                  }]),
                  barBorderRadius: 50,
                }
              },
                /*label: {
                    normal: {
                        show: true,
                        position: 'right',
                        color: 'red',
                        fontSize: 14,
                        formatter:
                        function(param) {
                            // return 'xx';
                        },
                    }
                },*/
                barWidth: 10,
                data: [1921, 1533, 1477, 1039, 955,901,854,804,751,201,]
            },
            {
                name: '外框',
                type: 'bar',
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                        color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
                    }
                },
                barGap: '-100%',
                z: 0,
                barWidth: 10,
                data: [2000, 2000, 2000, 2000, 2000,2000,2000, 2000, 2000, 2000]
            }
        ]
    };
    myChart.setOption(option);
}
//热门关键字
function buildChart5() {
    var chart = echarts.init(document.getElementById('key'));

    var option = {
        tooltip: {},
        series: [ {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            width: 600,
            height: 400,
            drawOutOfBound: true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [
                {
                    name: '云台山',
                    value: 10000,
                    textStyle: {
                        normal: {
                            color: '#F29961'
                        },
                        emphasis: {
                            color: 'red'
                        }
                    }
                },
                {
                    name: '夏季避暑胜地在云台',
                    value: 6181
                },
                {
                    name: '云台上景区音乐会',
                    value: 4386
                },
                {
                    name: '十一黄金周大堵车',
                    value: 4055
                },
                {
                    name: '环境整改何时能够落实',
                    value: 2467
                },
                {
                    name: '十一黄金周哪里玩',
                    value: 2244
                },
                {
                    name: '十一旅游需要防范什么',
                    value: 1898
                },
                {
                    name: '猪肉涨价',
                    value: 1484
                },
                {
                    name: '连锁反应',
                    value: 1112
                },
                {
                    name: '大阅兵',
                    value: 965
                },
                {
                    name: '高价打造A级景区',
                    value: 847
                },
                {
                    name: '景点',
                    value: 582
                },
                {
                    name: '不堪设想',
                    value: 555
                },
                {
                    name: '不堪设想',
                    value: 550
                },
                {
                    name: '交通运输',
                    value: 462
                },
                {
                    name: '交通堵塞',
                    value: 366
                },
                {
                    name: '宅',
                    value: 360
                },
                {
                    name: '大山',
                    value: 282
                },
                {
                    name: '青山绿水',
                    value: 273
                },
                {
                    name: 'BLACKPINK',
                    value: 265
                }
            ]
        } ]
    };

    chart.setOption(option);

    window.onresize = chart.resize;
}
buildChart1()
buildChart2()
buildChart3()
buildChart4()
buildChart5()

$('.main-box .right-box .hot-box .hot-details .title-list li').click(function(){
    let _index = $(this).index()
    $(this).addClass('active').siblings().removeClass('active')
    $('.main-box .right-box .hot-box .hot-details .content-list li').eq(_index).addClass('active').siblings().removeClass('active')
    console.log(_index)
})
$('.hot-details .title-list .content-list ul li').click(function(){
    let _index = $(this).index()
    $(this).addClass('active').siblings().removeClass('active')
    $('.hot-details .content-list li').eq(_index).addClass('active').siblings().removeClass('active')
})
